<template>
  <div class="client-page">
    <c-title :hide="false" text="客户评价"></c-title>
    <div class="flex-a-c flex-j-sb client-title">
      <div>评价</div>
      <div class="title-right" @click="assessmentType">
        <div>{{ commentName }}<span class="iconfont icon-member-bottom"></span></div>
        <div class="type-list " :class="commentTypeShow ? 'display' : ''">
          <block v-for="(item, index) in commentTypeArr" :key="index">
            <div @click.stop="commentTypeOn(item.value, item.name)">{{ item.name }}</div>
          </block>
        </div>
      </div>
    </div>
    <div class="client-list" v-if="commentList.length > 0">
      <block v-for="(item, index) in commentList" :key="index">
        <div class="client-item">
          <div class="client-head flex-a-c flex-j-sb">
            <div class="flex-a-c">
              <div class="img">
                <van-image width="1.5625rem" height="1.5625rem" round :src="item.member && item.member.avatar" />
              </div>
              <div>
                <div class="title">{{ item.member && item.member.nickname }}</div>
                <span class="time">{{ item.created_at }}</span>
              </div>
            </div>
            <div class="state " :class="item.comment_type_name === '推荐' ? 'on' : ''">{{ item.comment_type_name }}</div>
          </div>
          <div class="client-content">
            <span>{{ item.comment }}</span>
            <div class="evaluateImg-list flex" v-if="item.images.length > 0">
              <viewer :images="item.images">
                <block v-for="(itemImg, imgIndex) in item.images" :key="imgIndex">
                  <van-image width="4.375rem" height="4.375rem" class="evaluate-img" :src="itemImg" />
                </block>
              </viewer>
            </div>
          </div>
          <div class="goods-footer flex">
            <div>
              <van-image width="2.8125rem" height="2.8125rem" :src="item.order_goods && item.order_goods.thumb" />
            </div>
            <div class="title ell">{{ item.order_goods && item.order_goods.title }}</div>
          </div>
        </div>
      </block>
      <div class="mb20"></div>
    </div>
    <div v-else class="empty">
      <van-empty description="空空如也"></van-empty>
    </div>
  </div>
</template>
<script>
import clientEvaluation_controller from "./clientEvaluation_controller.js";
export default clientEvaluation_controller;
</script>
<style lang="scss" scoped>
.client-page {
  margin: 0.625rem 0.625rem 0 0.625rem;
}

.mb20 {
  height: 1.25rem;
  clear: both;
}

.client-title {
  padding-bottom: 0.7813rem;

  .title-right {
    position: relative;
  }

  .title-right .iconfont {
    margin-left: 0.1563rem;
  }

  .type-list {
    background-color: #fff;
    top: 1.875rem;
    right: 0.3125rem;
    position: absolute;
    display: none;
    z-index: 99;
  }

  .display {
    display: block;
  }

  .type-list div {
    box-sizing: border-box;
    white-space: nowrap;
    padding: 0.3125rem 1.875rem 0.3125rem 0.625rem;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    font-size: 0.875rem;

    &:hover {
      background: #f5f5f5;
    }
  }
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.client-item {
  background-color: #fff;
  padding: 0.8125rem 0.8438rem 0.625rem 0.8125rem;
  margin-bottom: 0.625rem;
}

.client-head {
  .img {
    margin-right: 0.5625rem;
  }

  .title {
    font-size: 0.6875rem;
    font-weight: bold;
    color: #222;
    text-align: left;
  }

  .time {
    font-size: 0.625rem;
    font-weight: bold;
    color: #7b7b7b;
  }

  .state {
    font-size: 0.6875rem;
    font-weight: bold;
    color: #6c6c6c;
  }

  .on {
    color: #ff3a00;
  }
}

.client-content {
  margin-top: 0.8125rem;
  padding-bottom: 0.6875rem;
  position: relative;
  text-align: left;
  word-wrap: break-word;

  &::before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2rpx;
    border-top: 2rpx solid #e9e9e9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  text {
    font-weight: bold;
    color: #4c4c4c;
    line-height: 1.125rem;
  }
}

.goods-footer {
  margin: 0.6875rem 0.5938rem 0 0;

  .title {
    text-align: left;
    height: 2.375rem;
    margin-left: 0.5938rem;
    font-size: 0.8125rem;
    color: #222;
    line-height: 1.25rem;
  }
}

.client-content {
  text {
    font-size: 0.75rem;
    color: #4c4c4c;
    display: inline-block;
    margin-bottom: 0.5313rem;
  }

  .evaluateImg-list {
    flex-wrap: wrap;
  }

  .evaluate-img {
    margin-right: 0.3438rem;
  }
}

.empty {
  background-color: #fff;
}
</style>
